<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        @-ms-viewport {
            width: device-width;
        }

        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0.75em;
            font: normal 100%/1.5 Palatino, Georgia, serif;
            text-align: center;
            color: #fff;
            background: #51818c;
            background-image: linear-gradient(135deg, #214a65, #a3e0cf);
            background-repeat: no-repeat;
            background-attachment: fixed;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        h1,
        h2,
        p,
        .swatch {
            margin: 0 auto 1.5rem;
        }

        h1,
        h2,
        button,
        .color {
            font-family: "Avenir Next", Avenir, "Myriad Pro", "Trebuchet MS", sans-serif;
            text-rendering: optimizeLegibility;
        }

        h1 {
            display: inline-block;
            font-size: 3em;
            border-bottom: 0.4375rem double #fff;
        }

        h2 {
            line-height: 1;
        }

        a {
            color: #fff;
        }

        button {
            width: 100%;
            margin-bottom: 0.75em;
            font-size: 1.5em;
            text-transform: none;
            -webkit-appearance: button;
            cursor: pointer;
            text-align: center;
            color: #588a92;
            background: #fff;
        }

        .txt-small {
            font-size: 0.875em;
            line-height: 1.714;
        }

        .block {
            outline: none;
            border: 0.125rem solid #fff;
            border-radius: 0.4375rem;
            -webkit-background-clip: border-box;
            background-clip: border-box;
        }

        .swatch {
            position: relative;
            min-height: 5em;
            background-color: rgba(0, 0, 0, 0.2);
            padding: 1em;
            -webkit-transition: background-color 0.2s linear;
            transition: background-color 0.3s linear;
        }

        .color {
            position: absolute;
            right: 1em;
            bottom: 1em;
            padding: 0.25em 0.5em;
            color: #fff;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 0.25em;
        }

        .error {
            background: #dd9441 !important;
            padding: 0.5em;
        }

        @media only screen and (min-width: 33.75em) {
            main {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 25em;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        }
    </style>
</head>
<body>
<main role="main">
    <noscript>
        <p class="block error">Enable JavaScript for app to function.</p>
    </noscript>

    <header role="banner">
        <h1>Colordinates</h1>
    </header>

    <article>

        <h2>Where the hue are you?</h2>

        <p>Get a color value based on your location on Earth.</p>

        <button class="block" id="huebutton" aria-controls="output">Find My Hue</button>

        <div class="block swatch" id="output" aria-live="polite"></div>

        <p class="txt-small" role="note">&bull; This uses geolocation on your device, please enable GPS. &bull; Your
            location is not shared from your device. &bull; CAUTION - Sharing the color result could be used to reveal
            your approximate location.</p>

    </article>
</main>
</body>
</html>

<script>
    var domButton = document.getElementById("huebutton"),
            domOutput = document.getElementById("output"),
            domLocale = document.getElementById("longlat"),
            lightUnit = 180 / 100;

    if (navigator.geolocation) {

        function fetchGeo(position) {
            navigator.geolocation.getCurrentPosition(makeColor, errorFeedback);
        }

        function errorFeedback(error) {
            domOutput.textContent = "Geolocation failed! Check settings and signal. Reload page and try again.";
            alert('Error - ' + error.message);
            domOutput.focus();
        }

        function makeColor(position) {

            // Make Hue
            if (position.coords.longitude > 0) {
                longHue = Math.round(position.coords.longitude);
            } else {
                longHue = Math.round(position.coords.longitude - -180 * 2);
            }

            // Make lightness
            if (position.coords.latitude > 0) {
                latSat = Math.round((180 - Math.round(position.coords.latitude) - 90) / lightUnit); //  Northern Latitude – Needs to range from 0 – 90
                console.log("Lat" + latSat);
            } else {
                latSat = Math.round((180 - (Math.round(position.coords.latitude) - -90)) / lightUnit); // Southern Latitude – Needs to range from 90 – 180
                console.log("Lat" + latSat);
            }

            var domOutputcolour = "hsla(" + longHue + ", " + latSat + "%, 50%, 1)";

            domOutput.setAttribute('style', 'background-color: ' + domOutputcolour);
            domOutput.innerHTML = '<div class="color txt-small">' + domOutputcolour + '</div>';
            domOutput.focus();
        }

        domButton.addEventListener('click', fetchGeo, false);
    } else {
        domOutput.textContent = "This app uses features not supported by your browser";
        domOutput.focus();
    }
</script>